<template>
  <table border="1px">
    <caption>商品列表</caption>
    <tr>
      <th>序号</th>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
    <tr v-for="(p,index) in productArr">
      <td>{{index+1}}</td>
      <td>{{p.title}}</td>
      <td>{{p.price}}</td>
      <td>{{p.num}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>

</template>

<script setup>

import {ref} from "vue";

const del=(index)=>{
  if (confirm('您确认要删除此条数据吗?')){
    productArr.value.splice(index, 1);
  }
}

let productArr =ref( [
  {title:'华为Mate60',price:8000,num:200},
  {title:'小米14',price:5000,num:1000},
  {title:'苹果15',price:10000,num:800},
  {title:'OPOO Reno11',price:2999,num:10}
]);


</script>

<style scoped>

</style>